<template>
  <div class="mainerLeft">
    <div class="minelst">
      <h2 class="ff1">云音乐特色榜</h2>
      <ul class="f-cb">
        <li
          class="mine"
          v-for="(item, index) in itemList"
          :key="index"
          @click="Go(item)"
          :class="{ active: item.id == id }"
        >
          <img v-lazy="item.coverImgUrl" />
          <div class="name">{{ item.name }}</div>
          <div class="fc">{{ item.updateFrequency }}</div>
        </li>
      </ul>
      <h2 class="ff1">全球媒体榜</h2>
      <ul class="f-cb">
        <li
          class="mine"
          v-for="(item, index) in globalList"
          :key="index"
          @click="Go(item)"
          :class="{ active: item.id == id }"
        >
          <img v-lazy="item.coverImgUrl" />
          <div class="name">{{ item.name }}</div>
          <div class="fc">{{ item.updateFrequency }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "toplistmainerleft",
  data() {
    return {
      itemList: [],
      globalList: [],
    };
  },
  computed: {
    id() {
      if (this.$route.query.id == undefined) return "19723756";
      return this.$route.query.id;
    },
  },
  methods: {
    //获取排行榜信息
    async getTopList() {
      let result = await this.$API.reqTopList();
      if (result.code == 200) {
        this.itemList = result.list.slice(0, 4);
        this.globalList = result.list.slice(4);
      }
    },
    //切换
    Go(item) {
      this.$router.push({
        path: "/home/toplist",
        query: {
          id: item.id,
        },
      });
      this.$bus.$emit("getNum", item.updateFrequency);
    },
  },
  mounted() {
    this.getTopList();
  },
};
</script>

<style scoped lang="less">
.mainerLeft {
  float: left;
  width: 241px;
  height: 2284.4px;
  border-right: 1px solid #d3d3d3;
  position: relative;
  background: rgb(249, 249, 249);
  .minelst {
    margin-top: 40px;
    height: 2244.4px;
    width: 100%;
    float: left;
    .ff1 {
      padding: 0 10px 12px 15px;
      width: 240px;
      // height: 27.2px;
      font-size: 14px;
      color: #000;
      font-family: simsun, \5b8b\4f53;
      display: block;
    }

    .f-cb {
      width: 240px;

      .mine {
        width: 240px;
        height: 62px;
        padding: 10px 0 10px 20px;
        position: relative;
        &:hover {
          background: rgb(244, 242, 242);
          cursor: pointer;
        }

        img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
          float: left;
        }

        .name {
          color: #000;
          // height: 16px;
          margin: 1px 0 4px;
        }

        .fc {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
  .active {
    background: rgb(230, 230, 230);
  }
}
</style>